<template>
  <div id="app">

    <!-- 广告   -->
    <div v-if="advertising == 'true'" class="gif">
      <img src="./assets/广告1.gif" alt="">
      <div><span v-show="mine<=7" @click="onclick">跳过</span><span v-show="mine > 7">{{mine - 7}}秒后可跳过</span></div>
    </div>
    <div v-else>
      <router-view />
    </div>
<!--    返回顶部-->
    <template>
      <div id="components-back-top-demo-custom">
        <a-back-top>
          <div class="ant-back-top-inner">
          </div>
        </a-back-top>
      </div>
    </template>

  </div>
</template>
<script>
import {getUserInfo, subscriptionlist} from "@/http/api";
export default {
  data() {
    return {
      // 倒计时
      mine:10,
      //开场动画显示
      advertising:'true',
      timer:''
    };
  },
  created() {
    if(sessionStorage.getItem('advertising') !== null) {
      this.advertising = 'false'
    }
    //  查看用户信息
    this.login = true
    this.loading = false
    getUserInfo().then(res => {
      // console.log(res)
      if (res.data.code == 0) {
        subscriptionlist().then(res => {
          this.$store.commit('changeClassifyList',res.data.rows)
        })
        this.login = false
        this.loading = true
        //将个人数据传到全局
        this.$store.commit('getloginObj',res.data.data)
        this.$store.commit('getLogin',this.login)
        this.$store.commit('getloading',this.loading)
      } else {
        this.login = true
        this.loading = true
        this.$store.commit('getloading',this.loading)
        this.$store.commit('getLogin',this.login)
      }
    })
  },
  methods: {
    //点击跳转广告
    onclick(){
      clearInterval(this.timer)
      this.advertising = 'false'
      sessionStorage.setItem('advertising',this.advertising)
    }
  },
  //倒计时
  mounted() {
     this.timer = setInterval(()=>{
      this.mine--
      if (this.mine <= 0){
        clearInterval(this.timer)
        this.advertising = 'false'
        sessionStorage.setItem('advertising',this.advertising)
      }
    },1000)
  }
};
</script>
<style lang="less">
    .gif {
      width: 100%;
      height: 100vh;
      position: relative;
      >img{
        width: 100%;
        height: 100%;
      }
      >div{
        padding: 0 10px;
        border-radius: 11px;
        position: absolute;
        right: 5%;
        top: 2%;
        z-index: 2;
        color: white;
        border: 1px solid white;
        >span{
          margin-right: 5px;
        }
      }
    }
  //************
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
  }
  #components-back-top-demo-custom .ant-back-top {
    bottom: 100px;
    right: 40px;
  }
  #components-back-top-demo-custom .ant-back-top-inner {
    height: 80px;
    width: 80px;
    //line-height: 40px;
    border-radius: 4px;
    background-image: url("https://wimg.588ku.com/gif/21/03/02/2cb0c63a98ff9a0f5c289722951c4caa.gif");
    background-position: 50%;
    background-size: 100% 100%;
  }

</style>
